<template>
  <div>
    <div
      v-if="isPageShow"
      class="wrap header-pc"
      style="
        background: none !important;
        padding: 0px !important;
        overflow-y: hidden;
      "
    >
      <div class="container">
        <!-- header头部 -->
        <!-- <div class="logo-wrap">
          <div class="logo" @click="handleGoHome"></div>
          <div class="logo-text" @click="handleGoHome">金职培训库</div>
        </div> -->
        <!-- login部分 -->
        <!-- 缩小 -->
        <!-- <div
          ref="container"
          class="login"
          :style="
            scaleFactor
              ? 'transform: scale(0.7);top: 29.5%;left: auto;right: 5%;'
              : 'transform: scale(1);top: 29.5%;left: 66.7%;right: auto;'
          "
        > -->
        <div
          ref="container"
          class="login"
          :style="
            scaleFactor
              ? 'top: 29.5%;left: auto;right: 5%;'
              : 'top: 29.5%;left: 66.7%;right: auto;'
          "
        >
          <div class="logintitle"></div>
          <div class="from">
            <el-tabs v-model="activeName" class="tab">
              <el-tab-pane
                label="教师登录"
                name="1"
                style="font-size: 22px"
              ></el-tab-pane>
              <el-tab-pane label="学生登录" name="0"></el-tab-pane>
            </el-tabs>
            <el-form
              :model="ruleForm"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item prop="iphone" class="code-item">
                <img
                  src="../../assets/images/user.png"
                  alt=""
                  class="input-img"
                />
                <el-input
                  v-model.trim="ruleForm.username"
                  class="input"
                  :placeholder="
                    activeName == '0' ? '请输入手机号' : '请输入用户名'
                  "
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item prop="pass" class="code-item">
                <img
                  src="../../assets/images/pass.png"
                  alt=""
                  class="input-img"
                />
                <el-input
                  type="password"
                  v-model.trim="ruleForm.password"
                  show-password
                  class="input"
                  placeholder="请输入密码"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item class="code-item">
                <div class="code-box">
                  <el-input
                    class="code-input"
                    v-model.trim="ruleForm.code"
                    style="width: 150px"
                    placeholder="请输入验证码"
                    clearable
                  >
                  </el-input>
                  <span class="code-img"
                    ><el-image :src="codeUrl ? codeUrl : ''" lazy>
                      <div slot="error" class="image-slot">正在加载验证码</div>
                    </el-image></span
                  >
                  <span class="refresh" @click="handelGetData">点击刷新</span>
                </div>
              </el-form-item>
            </el-form>

            <el-button type="primary" class="btn" @click="handleSubmit"
              >登 录</el-button
            >
            <a class="from-a"
              ><span
                v-if="activeName === '1'"
                @click="() => $router.push('/forgotpassword')"
                >忘 记 密 码</span
              ></a
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import { Base64 } from "js-base64";
// NOTIFY_STAY_TIME
import { STATUS_CODE_OK } from "@/config";
import { codeImgGet, userLogin } from "@/api/loginPage.js";
// import { validationMobilePhone } from "@/utils/fromcheck.js";
export default {
  name: "LoginPage",
  data() {
    return {
      scaleFactor: false,
      activeName: "1",
      isPageShow: true, //页面是否显示
      codeUrl: "", // 验证码图片
      ruleForm: {
        username: "",
        password: "",
        code: "",
      }, // 表单是数据
    };
  },
  watch: {
    activeName: {
      handler() {
        this.ruleForm = {};
      },
    },
  },
  created() {
    if(localStorage.getItem('Login1')=='1'){
      this.$router.push('/login1')
    }
    this.loginOut();
    this.handelGetData();
  },
  mounted() {
    this.updateScaleFactor();
    window.addEventListener("resize", this.updateScaleFactor);
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateScaleFactor);
  },
  destroyed() {
    //销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },
  methods: {
    ...mapActions(["setToken", "setUserData", "loginOut"]),
    // 跳转首页
    handleGoHome() {
      this.$router.push("/");
    },
    updateScaleFactor() {
      this.scaleFactor = window.innerWidth < 1200;
      if (window.innerWidth < 1000) {
        this.$refs.container.style.right = "5%";
        // this.$refs.container.style.top = '10%';
        this.$refs.container.style.left = "auto";
      }
    },
    // 点击回车键登录
    keyDown(e) {
      // 点击回车键执行登录方法 enter键的ASCII是13
      if (e.keyCode === 13) {
        this.handleSubmit(); // 定义的登录方法
      }
    },
    // 获取验证码
    async handelGetData() {
      this.codeUrl = "";
      let { data } = await codeImgGet();
      this.codeUrl = window.URL.createObjectURL(data);
    },

    // 提交
    async handleSubmit() {
      if (!this.ruleForm.username) {
        this.$notify.warning({
          title: "提示",
          message: this.activeName == "0" ? "手机号不能为空" : "用户名不能为空",
        });
        return;
      }
      // if (!validationMobilePhone(this.ruleForm.username)) {
      //   this.$notify.warning({
      //     title: "警告",
      //     message: "请输入正确的手机格式",
      //     duration: NOTIFY_STAY_TIME,
      //   });
      //   return false;
      // }
      if (!this.ruleForm.password) {
        this.$notify.warning({
          title: "提示",
          message: "密码不能为空！",
        });
        return;
      }
      if (!this.ruleForm.code) {
        this.$notify.warning({
          title: "提示",
          message: "验证码不能为空！",
        });
        return;
      }
      let { data } = await userLogin({
        username: this.ruleForm.username,
        password: Base64.encode(this.ruleForm.password),
        code: this.ruleForm.code,
        uuid: JSON.parse(sessionStorage.getItem("uuid")),
        type: this.activeName,
      });
      if (data.code !== STATUS_CODE_OK) {
        this.handelGetData();
        if (data.msg == "验证码不正确") {
          this.ruleForm.code = "";
        }
        if (data.msg == "登录成功") {
          this.setToken(data.data.token);
          this.setUserData(data.data);
          this.ruleForm = {};
          this.$notify.success({
            title: "提示",
            message: data.msg,
          });
          this.$router.push("/");
        }
        return;
      }
    },
  },
};
</script>

<style scoped lang="scss">
$bg-color: #fff;
::v-deep .el-image {
  width: 100%;
  height: 100%;
}
::v-deep .el-form {
  margin: 0px auto;
}
::v-deep .el-form-item__content {
  margin-left: 0px !important;
}
::v-deep .el-form-item__label {
  width: 80px !important;
  text-align: center !important;
  margin-left: 10px;
}
::v-deep .el-tabs__item {
  width: 180px;
  font-size: 20px;
  line-height: 20px;
}
::v-deep .el-input__inner {
  padding: 0 34px 0px 34px;
}
.code-box {
  ::v-deep .el-input__inner {
    padding: 0 15px;
  }
}
.header-pc {
  .container {
    position: relative;
    width: 100%;
    height: calc(100vh);
    background: url("../../assets/images/login.png") 100% 100% no-repeat;
    background-position: 10% 40%;
    background-size: cover;
    .logintitle {
      background: url("../../assets/images/logintitle.png") 100% 100% no-repeat;
      width: 100%;
      height: 200px;
      position: absolute;
      top: -232px;
      right: 29px;
      // top: 41px;
      // right: 246px;
      // top: 4.3%;
      // left: -12.8%;
    }
    .login {
      transition: transform 0.3s ease-in-out;
      background: #fff;
      height: 500px;
      width: 420px;
      position: fixed;
      // top: 280px;
      // right: 220px;
      top: 29.5%;
      left: 66.7%;
      display: flex;
      border-radius: 10px;
      box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.1);
      .from {
        flex: 0.64;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .tab {
          color: #fff;
          margin-left: 10px;
          margin: 0px auto;
          margin-bottom: 40px;
          padding: 0px 30px;
          text-align: center;
        }
        .from-a {
          margin-top: 20px;
          margin-left: 64px;
          width: 70px;
          height: 22px;
        }
        .demo-ruleForm {
          .input {
            width: 300px;
          }
          .code-item {
            display: flex;
            align-items: center;
            position: relative;
            .input-img {
              position: absolute;
              z-index: 2;
              top: 10px;
              left: 10px;
            }
            .code-box {
              width: 100%;
              height: 100%;
              display: flex;
              .refresh {
                line-height: 20px;
                margin-left: 10px;
                width: 30px;
                display: inline-block;
              }
              .code-input {
                width: 200px;
              }
              .code-img {
                width: 100px;
                height: 40px;
                display: inline-block;
                margin-left: 10px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .btn {
        margin: 0px auto;
        margin-top: 20px;
        width: 300px;
      }
    }
    .logo-wrap {
      display: flex;
      align-items: center;
      padding-top: 20px;
      cursor: pointer;
      .logo {
        height: 52px;
        margin-right: 12px;
        width: 52px;
        background: pink;
      }
      .logo-text {
        height: 52px;
        line-height: 52px;
        font-size: 18px;
      }
    }
  }
}
.wrap {
  padding-bottom: 30px;
  position: relative;
  background-color: $bg-color;
  .banner-wrap {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    margin: 30px;
    .banner {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      // object-fit: cover;
      z-index: 1;
    }
  }
}
</style>
